import * as React from 'react';
import { StyleSheet, View, Dimensions, Text } from 'react-native';
import { Tester, TestSuite, TestCase } from '@rnoh/testerino';
import { SwiperFlatListWithGestureHandler } from 'react-native-swiper-flatlist/WithGestureHandler';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
const { width, height } = Dimensions.get('window');
export default () => {
    const swiperData = [
        { id: '1', title: '第一页', backgroundColor: 'tomato' },
        { id: '2', title: '第二页', backgroundColor: 'skyblue' },
        { id: '3', title: '第三页', backgroundColor: 'gold' },
        { id: '4', title: '第四页', backgroundColor: 'pink' },
    ];

    const renderSwiperItem = ({ item }) => (
        <View style={[styles.slide, { backgroundColor: item.backgroundColor }]}>
            <Text style={styles.slideText}>{item.title}</Text>
        </View>
    );

    return (
        <GestureHandlerRootView style={{ flex: 1 }}>
            <Tester>
                <TestSuite name="SwiperFlatListWithGestureHandler">
                    <TestCase itShould="基础水平轮播 vertical= {false} ">
                        <View style={styles.testContainer}>
                            <SwiperFlatListWithGestureHandler
                                data={swiperData}
                                renderItem={renderSwiperItem}
                                vertical={false}
                                showPagination={true}
                                autoplay
                                //当没有该属性时 会拿取当前整个屏幕的宽与高 影响滑动阈值判断
                                getItemLayout={(data, index) => ({
                                    length: styles.testContainer.height,  // 每个项目的固定高度
                                    offset: styles.testContainer.height * index,  // 累计偏移量 = 高度 × 索引
                                    index: index,
                                })}
                            />
                        </View>
                    </TestCase>
                    <TestCase itShould="基础垂直轮播 vertical={true}">
                        <View style={styles.testContainer}>
                            <SwiperFlatListWithGestureHandler
                                data={swiperData}
                                renderItem={renderSwiperItem}
                                vertical={true}
                                showPagination={true}
                                autoplay
                                getItemLayout={(data, index) => ({
                                    length: styles.testContainer.height,
                                    offset: styles.testContainer.height * index,
                                    index: index,
                                })}
                            />
                        </View>
                    </TestCase>
                </TestSuite>
            </Tester>
        </GestureHandlerRootView>
    );
};

const styles = StyleSheet.create({
    testContainer: {
        width: width * 0.7,
        height: height * 0.3,
        alignSelf: 'center',
        borderColor: '#ddd',
        borderRadius: 10,
    },
    slide: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: height * 0.3,
        width: width * 0.7,
    },
    slideText: {
        fontSize: 24,
        color: 'white',
        fontWeight: 'bold',
    },
});

